<template>
  <view  :class="payStatus ? 'content_pay' : 'content'"  >
    <view class="cont_box"   v-if="!payStatus">
      <view v-if="boxType == 1">
        <view class="cont_box_title">你的每次选择</view>
        <view class="cont_box_text">都是内心世界的反应</view>
        <view class="cont_box_text">只是你还未曾意识到</view>
      </view>
      <view class="cont_box_answer">
        <!-- 答题 -->
        <view v-if="boxType == 1">
           <view class="_box_answer_top">
              <view class="_answer_top_title">
                <view class="_top_title_left">出题{{currentObj.id}}/5</view>
                <view class="_top_title_right">选择你的答案进入下一题</view>
              </view>
              <view class="_answer_top_progress">
                <view class="_top_progress_box" :style="{ width: (currentObj.id * 20) + '%' }"></view>
              </view>
            </view>
            <view class="_box_answer_cont">
              <view class="_answer_cont_title">{{currentObj.title}}</view>
              <view class="_answer_cont_sel">
                <view class="_cont_sel_item" @click="selectAnswer(item,index)" v-for="(item,index) in currentObj.options" :key="index"
                :style="{color: item.title == '男' ? '#3d83f6' :item.title == '女' ? '#ec4899'  :  ''}"
                >{{item.title}}</view>
                <view class="_cont_sel_item" @click="previous(item,index)" style="margin-top: 40rpx;" v-if="currentObj.id != 1">上一题</view>
              </view>
            </view>
        </view>
        <view v-else-if="boxType == 2">
          <view class="_box_data_top">
            <view class="_data_top_time">
              <image class="_top_time_icon"
                src="/static/time_icon.png"
                mode="scaleToFill"
              />
              <text class="_top_time_text">名额有限，请在 {{countdownText}} 内填写信息！</text>
            </view>
          </view>
          <view class="_data_top_title">填写信息, 获取专属咨询方案</view>
          <view class="_data_info_item">
            <view class="_data_info_title">您的姓名 *</view>
            <input class="_data_info_input" v-model="consultingObj.name" type="text" placeholder="请输入您的姓名" />
          </view>
          <view class="_data_info_item">
            <view class="_data_info_title">手机号码 *</view>
            <input class="_data_info_input" v-model="consultingObj.phone" type="text" placeholder="请输入手机号码" />
          </view>
          <view class="_data_info_item">
            <view class="_data_info_title">备注 (选填)</view>
            <textarea class="_data_info_input" v-model="consultingObj.remark" style="height: 200rpx;width: 600rpx;" type="text" placeholder="如需备注方便联系时间或其他说明,可在此填写" />
          </view>
          <view class="_data_info_btn" @click="appointment()" >
            立即预约咨询师
          </view>
        </view>
      </view> 
    </view>
    <!-- 支付弹窗 -->
    <view class="payment" v-if="paymentShow">
      <view class="payment_mak"></view>
      <view class="payment_box">
        <view class="payment_box_top">
          <view></view>
          <view style="font-size: 40rpx;color: #a7a7a7;" @click="paymentShow=false">×</view>
        </view>
        <view class="payment_box_method">
          <view class="_box_method_wx method_pay">
            <image class="_method_wx_img" src="/static/wx_pay.png" mode="scaleToFill"/>
            <view class="_method_wx_text">微信支付</view>
          </view>
          <!-- 填写验证码 -->
          <view class="verify" v-if="consultingObj.codeStatus != 1">
            <view class="verify_title">短信验证</view>
            <view class="verify_text">为了您的账户安全，请验证手机号码</view>
            <view class="verify_phone">手机号： {{consultingObj.phone}}</view>
            <view class="verify_code">
              <input class="verify_code_input" maxlength="4" v-model="consultingObj.code"  type="text" placeholder="请输入验证码">
              <view class="verify_code_but" @click="getCode()" v-if="codeTime <= 0 || codeTime == ''" >获取验证码</view>
              <view class="verify_code_time" v-else>{{codeTime}}秒后获取</view>
            </view>
          </view>
          <view class="code_tisp" @click="verifyFun()"  v-if="consultingObj.codeStatus != 1">未获取到验证码？</view>
          <!--
          <view class="_box_method_btn" @click="payResult(1)">
           查询支付结果
          </view>
          --> 
         

          <view class="_box_method_btn" @click="payBtn()">
            确认支付 ￥9.9
          </view>
          <view class="_box_method_introduction">
            <view class="_method_introduction_title">专业情感咨询服务</view>
            <view class="_method_introduction_text1">1对1专属情感导师</view>
            <view class="_method_introduction_servicetTle">您将获的以下服务:</view>
            <view class="_method_introduction_service_box">
              <view class="_service_box_left">1</view>
              <view class="_service_box_right">1对1情感匹配评估</view>
            </view>
             <view class="_method_introduction_service_box">
              <view class="_service_box_left">2</view>
              <view class="_service_box_right">30-60分钟电话沟通</view>
            </view>
             <view class="_method_introduction_service_box">
              <view class="_service_box_left">3</view>
              <view class="_service_box_right">针对性解惑，给出专业建议</view>
            </view>
             <view class="_method_introduction_service_box">
              <view class="_service_box_left">4</view>
              <view class="_service_box_right">全程隐私保护，安全可靠</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 支付成功页面 -->
    <view class="pay_success" v-if="payStatus">
      <view class="pay_success_box">
        <view class="_success_box_title">
          支付成功 • 预约已确认
        </view>
        <view class="_success_box_text" style="margin-top: 30rpx;">感谢您的信任，我们已收到您的咨询预约。</view>
        <view class="_success_box_text">专属顾问将<text class="_box_text_width">尽快与您</text>  主动联系,</view>
        <view class="_success_box_text">请保持手机畅通并留意短信及微信。</view>
        <view class="_box_text_width">我们不会在抖音平台主动私信您，请谨防上当受骗!</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShow,onLoad } from '@dcloudio/uni-app';
import { onMounted } from 'vue';
import { ref } from 'vue';

//支付状态
const payStatus = ref(false);

//当前的试题
const currentObj = ref({});
//咨询信息
const consultingObj = ref({
  name: '',
  phone: '',
  remark:"",
  coed:null,
  codeStatus:null
});


const codeTime = ref(0)
//题库
const questionBank = ref([
  {
    id:1,
    title: '你遇到了上面感情问题？',
    options:[
      {value:'1-1',title:'恋爱问题'},
      {value:'1-2',title:'婚姻问题'},
      {value:'1-3',title:'争吵问题'},
      {value:'1-4',title:'对方的问题'},
    ]
  },
  {
    id:2,
    title: '你们现在是什么关系？',
    options:[
      {value:'2-1',title:'毫无联系'},
      {value:'2-2',title:'偶尔还说话'},
      {value:'2-3',title:'正常在一起'},
      {value:'2-4',title:'关系很僵'},
    ]
  },
  {
    id:3,
    title: '现在的心情是怎么样的？',
    options:[
      {value:'3-1',title:'悲伤'},
      {value:'3-2',title:'麻木'},
      {value:'3-3',title:'犹豫不决'},
      {value:'3-4',title:'平淡'},
    ]
  },
  {
    id:4,
    title: '如果有机会改变现状，您的态度是？',
    options:[
      {value:'4-1',title:'想努力尝试'},
      {value:'4-2',title:'心里不确定'},
      {value:'4-3',title:'一切随缘'},
      {value:'4-4',title:'保持现状'},
    ]
  },
  {
    id:5,
    title: '性别也会影响解决问题的方式',
    options:[
      {value:'5-1',title:'男'},
      {value:'5-2',title:'女'},
    ]
  }
])

//答案列表
const AnswerArr = ref([])
const clickShow = ref(true)
//点击选择答案
const selectAnswer = (item,index) =>{

  let Time = setTimeout(() => {
    let ind = AnswerArr.value.findIndex(res => res.text == item.title)
    if(ind == -1){
      AnswerArr.value[currentObj.value.id-1] = {
        title:currentObj.value.title,
        text:item.title
      }
      if(currentObj.value.id == 5){
        console.log("答案列表",AnswerArr.value)
        boxType.value = 2
        countdownFun()
      }else{
        currentObj.value = questionBank.value[currentObj.value.id]
      }
      clearTimeout(Time)
    }
  },300)
}
//获取验证码
const getCode = () =>{ 
 uni.request({
      url: requestUrl +"/sms/dy/send",
      data: {
        phone: consultingObj.value.phone,
      },
      method: "post",
      header: header,
      success: (res) => {
        const { data } = res;
        console.log("查看返回",data);
        if(data.code == 200){
          codeFun()
        }
      },
      fail: function (err) {
        uni.showToast({ title: '系统繁忙！', icon: 'error' });
      },
    });


}

const codeInterval = ref(null)
//短信倒计时
const codeFun = () => {
  codeTime.value = 59
  codeInterval.value = setInterval(() => {
    if(codeTime.value > 0){
      codeTime.value--
    }else{
      clearInterval(codeInterval.value)
      codeTime.value = ''
    }
  },1000)
  
}
//点击上一题
const previous = () =>{ 
  setTimeout(() => {
    currentObj.value = questionBank.value[currentObj.value.id-2]
  },250)
}


//显示块(1:显示选择题,2:填写信息)
const boxType = ref(1);
const progressNum = ref(1);

const countdownNum = ref(600);
const countdownTime = ref(null);
const countdownText = ref('');
// 支付弹窗
const paymentShow = ref(false)
// const requestUrl = "https://test.gxfwh.cn/xcx"
const requestUrl = "https://gxfwh.cn/xcx"
 const header = {
    Accept: 'application/json',
  };

const repeatState = ref(false)
//点击去支付
const payBtn = () =>{

  if(repeatState.value) return
  console.log("去支付",consultingObj.value)
  if(consultingObj.value.codeStatus != 1 && consultingObj.value.code == null){
    return uni.showToast({ title: '请输入验证码！', icon: 'none' });
  }

  let data = {
    question: JSON.stringify(AnswerArr.value[0]) ,
    ties:JSON.stringify(AnswerArr.value[1]),
    mood:JSON.stringify(AnswerArr.value[2]),
    attitude:JSON.stringify(AnswerArr.value[3]),
    sexItem:AnswerArr.value[4].text == '男'? 1 : 2,
    name: consultingObj.value.name,
    phone: consultingObj.value.phone,
    remark: consultingObj.value.remark,
    code: consultingObj.value.code,
    codeStatus:consultingObj.value.codeStatus,
    productId:1024,
    clickId:clickId.value,
    adId:adId.value,
    creativeId:creativeId.value,
    creativeType:creativeType.value,
    price:9.9,
    source:'newType',
    // price:0.01
  }
  console.log('去支付',data)
  uni.request({
      url: requestUrl +"/douyin/ad/pay",
      data: data,
      method: "post",
      header: header,
      success: (res) => {
        const { data } = res;
        console.log("查看返回",data);
        if(data.code == 200){
          uni.setStorageSync('orderId', data.data.orderId);
          window.location.href = data.data.h5Url
        }else if(data.code == 500){
          uni.showToast({ title: data.msg, icon: 'none' });
        }
      },
      fail: function (err) {
        uni.showToast({ title: '系统繁忙！', icon: 'error' });
      },
    });
    repeatState.value = true
    setTimeout(()=>{ 
      repeatState.value = false
    },800)
}

//查询支付结果
const payResult = (type) => { 
  if(uni.getStorageSync('orderId') && uni.getStorageSync('orderId') != ''){
    uni.request({
      url: requestUrl +"/douyin/ad/pay/result",
      data: {orderId: uni.getStorageSync('orderId')},
      method: "post",
      header: header,
      success: (res) => {
        const { data } = res;
        console.log("查看返回",data);
        if(data.code == 200){
          if( data.data.orderStatus == 3){
            uni.showToast({ title: '支付成功', icon: 'none' ,duration: type == 1 ? 2000 : 8000});
            PaymentStatus.value = false
            // uni.setStorageSync('orderId','')
            paymentShow.value = false
            // payStatus.value = true
            clearInterval(PaymentInterval.value);
            if((new Date().getDate())%2){
             window.location.href = "https://work.weixin.qq.com/ca/cawcded26012fe475a" 
            }else{
             window.location.href = "https://work.weixin.qq.com/ca/cawcde82cd8a03e7d8" 
            }
          }else{
            if(type == 1)uni.showToast({ title: '支付失败', icon: 'none',duration:  type == 1 ? 2000 : 8000 });
          }
          PaymentStatus.value = true
          consultingObj.value.codeStatus = null
        }else{
          // uni.showToast({ title: '系统繁忙！', icon: 'error' });
        }
      },
      fail: function (err) {
        // uni.showToast({ title: '系统繁忙！', icon: 'error' });
      },
    });
  }else{
    clearInterval(PaymentInterval.value);
    PaymentTimeNum.value = 0
  }
}

//验证手机号
const verifyFun = () =>{ 
  uni.showModal({
	title: '请您确认手机号是否正确',
	content: '号码：' + consultingObj.value.phone,
  cancelText:'修改',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
      consultingObj.value.codeStatus = 1
		} else if (res.cancel) {
			console.log('用户点击取消');
      paymentShow.value = false
		}
	}
});
}

//点击预约
const appointment = () => {
  let phoneReg=/^1[3-9][0-9]{9}$/
  if(consultingObj.value.name != '' && consultingObj.value.phone != ''){
    if(!phoneReg.test(consultingObj.value.phone)){
      uni.showToast({
        title: '手机号错误',
        icon: 'none',
        duration: 1500
      });
        return ;
    }
    console.log('预约',consultingObj.value)
    paymentShow.value = true
  }else{
    uni.showToast({
      title: '请填写必填项',
      icon: 'none',
      duration: 1500
    });
  }
}
//倒计时
const countdownFun = () => { 
  countdownTime.value = setInterval(() => { 
    countdownNum.value--;
    if(countdownNum.value <= 0){
      clearInterval(countdownTime.value);
      countdownText.value = '00 : 00'
      return
    }
    countdownText.value = '0'+Math.floor(countdownNum.value/60)+' : '+( (countdownNum.value%60) < 10 ? '0'+countdownNum.value%60 : countdownNum.value%60)
  }, 1000);

};
onMounted(() => {
  if(uni.getStorageSync('orderId') != ''){
    setTimeout(() => {
      uni.setStorageSync('orderId','')
    }, 30000);
  }
  console.log('mounted');
  // clearInterval(countdownTime.value);
  currentObj.value = questionBank.value[0]
});

//查询支付状态倒计时控制
const PaymentStatus = ref(false)
const PaymentInterval = ref(null)
const PaymentTimeNum = ref(0)


//抖音参数
const clickId = ref(null)
const adId = ref(null)
const  creativeId = ref(null)
const creativeType = ref(null)
onLoad((options) =>{
  console.log("看看日期",new Date().getDate())
  console.log("查询参数",options)
  clickId.value = options.clickid
  adId.value = options.adid
  creativeId.value = options.creativeid
  creativeType.value = options.creativetype
})

onShow(() => { 

  if(uni.getStorageSync('orderId') != ''){
    // setTimeout(() => { 
    //   payResult(0)
    // }, 4000);
    PaymentInterval.value = setInterval(() => { 
      PaymentTimeNum.value++
      if(PaymentTimeNum.value >= 150){
       clearInterval(PaymentInterval.value);
       return
      }
      if(PaymentStatus){
        payResult(0)
      }else{
      clearInterval(PaymentInterval.value);
      }
    }, 2000);
  }
});

</script>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  background: linear-gradient( 135deg, #667ce5, #754ea2);
}
.content_pay{
  width: 100vw;
  height: 100vh;
  background: linear-gradient( 180deg, #e8f8f1 15%, #ffffff 60%);
}
.cont_box {
  padding: 30rpx;
}
.cont_box_title{
  margin-top: 60rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}
.cont_box_text{
  font-size: 28rpx;
  font-weight: 400;
  color: #fff;
}

.cont_box_answer{
  margin-top: 30rpx;
  padding: 24rpx;
  border-radius: 30rpx;
  background-color: #fff;
  padding-bottom: 50rpx;
}
._box_answer_top{
  margin-bottom: 30rpx;
  
}
._answer_top_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._top_title_left{
  font-size: 30rpx;
  font-weight: 600;
  color: #333;

}
._top_title_right{
  font-size: 28rpx;
  font-weight: 400;
  color: #686868;

}
._answer_top_progress{
  margin-top: 20rpx;
  height: 8rpx;
  border-radius: 6rpx;
  background-color: #e3dbf9;
  overflow: hidden;
}
._top_progress_box{
  background-color: #9059d4;
  height: 8rpx;
  border-radius: 6rpx;
}

._box_answer_cont{

}
._answer_cont_title{
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
._answer_cont_sel{
  margin-top: 20rpx;
}
._cont_sel_item{
  width: 600;
  margin: 0 auto;
  margin-bottom: 14rpx;
  height: 80rpx;
  border-radius: 30rpx;
  border: 4rpx solid #eef0f0;
  text-align: center;
  background-color: #fafffc;
  line-height: 80rpx;
  font-size: 30rpx;
}
._cont_sel_item:active{
  background-color: #7b3bec;
  border: 4rpx solid #fff;
  color: #fff !important;
  box-shadow: 5rpx 5rpx 10rpx rgba(123,59,236,0.8) ;
}


._box_data_top{
  margin-bottom: 20rpx;
  background: linear-gradient( 90deg, #fcc124, #f8a310);
  padding: 10rpx 30rpx;
  border-radius: 20rpx;

}
._data_top_time{
  display: flex;
  align-items: center;
  justify-content: center;
}
._top_time_icon{
  width: 50rpx;
  height: 50rpx;
}
._top_time_text{
  font-size: 28rpx;
  font-weight: 400;
  color: #fff;
  margin-left: 20rpx;
}
._data_top_title{
  margin-top: 40rpx;
  width: 100%;
  text-align: center;
  font-size: 34rpx;
  font-weight: 600;
  color: #2a2c2b;
}
._data_info_item{
  margin-top: 30rpx;
}
._data_info_title{
  font-size: 28rpx; 
  color: #4f5455;  
}
._data_info_input{
  margin-top: 14rpx;
  border: 2rpx solid #eff1f1;
  border-radius: 16rpx;
  padding: 14rpx 20rpx;
}
._data_info_btn{
  margin: 0 auto;
  margin-top: 40rpx;
  height: 96rpx;
  width: 600rpx;
  border-radius: 60rpx;
  background: linear-gradient( 90deg, #7e39ea, #a254f6);
  font-size: 32rpx;
  text-align: center;
  line-height: 96rpx;
  color: #fff;
}
.payment{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
}
.payment_mak{
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.payment_box{
  margin-left: 30rpx;
  position: absolute;
  padding: 30rpx;
  margin-top: 140rpx;
  background: #fff;
  border-radius: 20rpx;
  width: 630rpx;
  z-index: 3;
  overflow: hidden;
}
.payment_box_top{
  margin-top: -20rpx;
  top: 140rpx;
  display: flex;
  justify-content: space-between;
}
.payment_box_method{
  margin-top: 20rpx;
}
._box_method_wx{
  margin: 0 auto;
  border: 6rpx solid #e4e6e9;
  width: 600rpx;
  height: 90rpx;
  border-radius: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
}
._method_wx_img{
  margin-left: 30rpx;
  width: 60rpx;
  height: 60rpx;
}
._method_wx_text{
  font-size: 30rpx;
  color: #333;
  margin-left: 20rpx;
}
.method_pay{
  border: 4rpx solid #733bd2;
  box-shadow: 5rpx 5rpx 14rpx rgba(111,67,118,0.8);
}
._box_method_btn{
  margin-top: 60rpx;
  width: 620rpx;
  height: 96rpx;
  border-radius: 60rpx;
  background: linear-gradient( 90deg, #803aed, #a254f6);
  text-align: center;
  line-height: 96rpx;
  font-size: 34rpx;
  color: #fff;
}
._box_method_introduction{
  margin-top: 40rpx;
  border: 2rpx solid #f5f5f5;
  width: 580rpx;
  padding: 30rpx 20rpx;
  border-radius: 20rpx; 
  background: linear-gradient( 135deg, #fffdff, #f5ecff);


}
._method_introduction_title{
  margin-top: 30rpx;
  font-size: 32rpx;
  color: #36383a;
  font-weight: 600;
}
._method_introduction_text1{
  font-size: 26rpx;
  color: #8e8b93;
}
._method_introduction_servicetTle{
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #363439;
  font-weight: 600;
}
._method_introduction_service_box{
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
._service_box_left{
  width: 44rpx;
  height: 44rpx;
  background: linear-gradient( 135deg, #7d44ca, #9e5ae0);
  border-radius: 50%;
  text-align: center;
  line-height: 44rpx;
  font-size: 26rpx;
  color: #fff;

}
._service_box_right{
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #7d787f;
}


.verify{
  margin-top: 40rpx;
  border: 2rpx solid #f2f5f4;
  width: 580rpx;
  padding: 30rpx 20rpx;
  border-radius: 30rpx; 
  background: #fafffc;

}
.verify_title{
  font-size: 32rpx;
  color: #333;
}
.verify_text{
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #737575;
}
.verify_phone{
  margin-top: 20rpx;
  padding: 14rpx 20rpx;
  border: 2rpx solid #eff1f1;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #676a69;
}
.verify_code{
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.verify_code_input{
  width: 320rpx;
  padding: 0 20rpx;
  height: 70rpx;
  border: 2rpx solid #eff1f1;
  border-radius: 12rpx;
}
.verify_code_but{
  width: 200rpx;
  height: 70rpx;
  background: linear-gradient( 135deg, #7d44ca, #9e5ae0);
  border-radius: 14rpx;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
}
.verify_code_time{
  width: 200rpx;
  height: 70rpx;
  background: #cfd6d3;
  border-radius: 14rpx;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
}



.pay_success_box{
  left: 35rpx;
  top: 150rpx;
  position: absolute;
  width: 620rpx;
  height: 620rpx;
  padding: 30rpx;
  border-radius: 34rpx;
  background-color: #fff;
  box-shadow: 5rpx 10rpx 10rpx rgba(248, 247, 248, 0.8);
}
._success_box_title{
  font-size: 44rpx;
  color: #2a2c2b;
  text-align: center;
  font-weight: 600;
  margin-top: 120rpx;
}
._success_box_text{
  margin-top: 6rpx;
  font-size: 30rpx;
  color: #868686;
  text-align: center;
}
._box_text_width{
  margin-top: 6rpx;
  font-size: 30rpx;
  color: #666666;
  text-align: center;
  font-weight: 600;
}
.code_tisp{
  margin-top: 20rpx;
  width: 100%;
  text-align: right;
  color: #b1b1b1;
  font-size: 28rpx;
}
</style>
